<!-- #layout name=blank -->
<div id="app">
  <div class="page-header">
    <h1 class="title">Search</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="row">
    <div class="col-md-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"
            ><span>Status</span>
            <i
              class="fa fa-question-circle"
              id="question-status"
              title="What's this?"
            ></i
          ></h3>
        </div>
        <div class="panel-body text-center" style="height: 66px">
          <kb-switch v-model="enableSearch"></kb-switch>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Index Data</h3>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="item col-md-3 col-sm-6 col-xs-6">
              <div class="number">{{ wordCount }}</div>
              <small class="text-muted">Word</small>
            </div>
            <div class="item col-md-3 col-sm-6 col-xs-6">
              <div class="number">{{ docCount }}</div>
              <small class="text-muted">Document</small>
            </div>
            <div class="item col-md-3 col-sm-6 col-xs-6">
              <div class="number">{{ diskSize }}</div>
              <small class="text-muted">Disk Size</small>
            </div>
            <div class="item col-md-3 col-sm-6 col-xs-6 text-center">
              <button class="btn blue" @click="rebuild">Rebuild</button>
              <button class="btn red" @click="clean">Clean</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Lastest Search</h3>
        </div>
        <div class="panel-body row">
          <kb-table style="margin-bottom: -30px;" :data="model">
            <kb-table-column :label="Kooboo.text.site.visitorLog.ip" prop="ip">
            </kb-table-column>

            <kb-table-column
              :label="Kooboo.text.site.search.keywords"
              prop="keywords"
            >
            </kb-table-column>

            <kb-table-column :label="Kooboo.text.site.search.docFound">
              <template v-slot="row">
                <span
                  class="badge"
                  :class="row.docFound>0 ? 'blue' : 'badge-warning'"
                  >{{ row.docFound }}</span
                >
              </template>
            </kb-table-column>

            <kb-table-column :label="Kooboo.text.common.date">
              <template v-slot="row">
                <span>
                  {{ new Date(row.time).toDefaultLangString() }}
                </span>
              </template>
            </kb-table-column>
          </kb-table>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Search statistic</h3>
          <select class="pull-right" v-model="week">
            <option v-for="item in weeks" :key="item" :value="item">{{
              item
            }}</option>
          </select>
        </div>
        <div class="panel-body row">
          <div id="chart" style="height: 500px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/lib/bootstrap-switch/bootstrap-switch.min.js",
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/Scripts/components/kbTable.js",
    "/_Admin/Scripts/components/kbSwitch.js",
    "/_Admin/Scripts/lib/echarts.min.js"
  ]);
  Kooboo.loadCSS([
    "/_Admin/Scripts/lib/bootstrap-switch/bootstrap-switch.min.css"
  ]);

  var chart;
  new Vue({
    el: "#app",
    data: function() {
      return {
        breads: [
          {
            name: "SITES"
          },
          {
            name: "DASHBOARD"
          },
          {
            name: Kooboo.text.common.Search
          }
        ],
        weeks: [],
        week: "",
        enableSearch: false,
        init: false,
        wordCount: null,
        docCount: null,
        diskSize: null,
        model: []
      };
    },
    mounted: function() {
      chart = echarts.init(document.getElementById("chart"));
      var me = this;
      Kooboo.Search.getWeekNames().then(function(res) {
        if (res.success) {
          me.weeks = res.model.reverse();
          if (me.weeks.length) me.week = me.weeks[0];
        }
      });

      Kooboo.Search.getIndexStat().then(function(res) {
        if (res.success) {
          me.wordCount = res.model.wordCount;
          me.docCount = res.model.docCount;
          me.diskSize = Kooboo.bytesToSize(res.model.diskSize);
          me.enableSearch = res.model.enableFullTextSearch;
          me.$nextTick(function() {
            me.init = true;
          });
        }
      });

      Kooboo.Search.getLastest().then(function(res) {
        if (res.success) {
          me.model = res.model;
        }
      });
    },
    methods: {
      rebuild: function() {
        var me = this;
        Kooboo.Search.Rebuild().then(function(res) {
          if (res.success) {
            me.wordCount = res.model.wordCount;
            me.docCount = res.model.docCount;
            me.diskSize = Kooboo.bytesToSize(res.model.diskSize);
            window.info.done(Kooboo.text.info.rebuild.success);
          } else {
            window.info.fail(Kooboo.text.info.rebuild.fail);
          }
        });
      },
      clean: function() {
        var me = this;
        if (confirm(Kooboo.text.confirm.search.clean)) {
          Kooboo.Search.Clean().then(function(res) {
            if (res.success) {
              me.wordCount = res.model.wordCount;
              me.docCount = res.model.docCount;
              me.diskSize = Kooboo.bytesToSize(res.model.diskSize);
              window.info.done(Kooboo.text.info.clean.success);
            } else {
              window.info.fail(Kooboo.text.info.clean.fail);
            }
          });
        }
      }
    },
    watch: {
      enableSearch: function(enable) {
        var me = this;
        if (!me.init) return;
        if (enable) {
          var rebuild = confirm(Kooboo.text.confirm.search.rebuild);
          Kooboo.Search.Enable({
            rebuild: rebuild
          }).then(function(res) {
            if (res.success) {
              window.info.done(Kooboo.text.info.enable.success);
              me.wordCount = res.model.wordCount;
              me.docCount = res.model.docCount;
              me.diskSize = Kooboo.bytesToSize(res.model.diskSize);
            } else {
              window.info.fail(Kooboo.text.info.enable.fail);
            }
          });
        } else {
          Kooboo.Search.Disable().then(function(res) {
            if (res.success) {
              window.info.done(Kooboo.text.info.disable.success);
            } else {
              window.info.fail(Kooboo.text.info.disable.fail);
            }
          });
        }
      },
      week: function(week) {
        Kooboo.Search.SearchStat({
          weekname: week
        }).then(function(res) {
          if (res.success) {
            var model = Kooboo.objToArr(res.model);
            var keys = model.map(function(m) {
                return m.key;
              }),
              values = model.map(function(m) {
                return m.value;
              });

            var chartOption = {
              color: ["#3398DB"],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              grid: {
                top: "2%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
              },
              yAxis: [
                {
                  type: "category",
                  data: keys
                }
              ],
              xAxis: [
                {
                  type: "value",
                  axisTick: {
                    alignWithLabel: true
                  }
                }
              ],
              series: [
                {
                  name: Kooboo.text.site.search.searchedCount,
                  type: "bar",
                  barWidth: "60%",
                  data: values
                }
              ]
            };

            chart.setOption(chartOption);
          }
        });
      }
    }
  });

  $(window).on(
    "resize",
    _.debounce(function() {
      chart && chart.resize();
    }, 100)
  );

  $("#question-status").popover({
    container: "body",
    content: Kooboo.text.popover.searchStatusExplain,
    placement: "right",
    trigger: "hover"
  });
</script>
